

<template>
  <div>
    <!-- 上传控件 -->
    <!-- 单个上传 -->
    <!-- 单选框 -->
    <el-radio-group v-model="radio" @change="radioChange">
      <el-radio value="1" size="large">单选</el-radio>
      <el-radio value="2" size="large">多选</el-radio>
    </el-radio-group>
    <!-- 单选 -->
    <el-upload
    v-if="radio=='1'"
    v-model:file-list="fileList"
    class="upload-demo"
    :action="action"
    :name="'file'"
    :headers="headers"
    :on-success="handleSuccess"
    :limit="1"
    :before-upload="beforeUpload"
  >
    <el-button type="primary">单选上传</el-button>
    <template #tip>
      <div class="el-upload__tip ">
        <!-- jpg/png files with a size less than 500KB. -->
         <!-- <span style="color:red">
         注意：单选上传
         </span> -->
         <!-- patter 样式 text文本信息 -->
         <waText :text="'注意：单选上传'"  :patter="{color:'red'}" />
      </div>
    </template>
  </el-upload>
  <!-- 多选 -->
    <el-upload
    v-if="radio=='2'"
    v-model:file-list="fileList"
    class="upload-demo"
    :action="action"
    :name="'file'"
    :multiple="true"
    :headers="headers"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :limit="5"
  >
    <el-button type="primary">多选上传</el-button>
    <template #tip>
      <div class="el-upload__tip ">
        <!-- jpg/png files with a size less than 500KB. -->
         <!-- <span style="color:red">
         注意：多选上传，最多5个文件
         </span> -->
         <waText :text="'注意：多选上传，最多5个文件'"  :patter="{color:'red'}" />
      </div>
    </template>
  </el-upload>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { getToken, formatToken } from "@/utils/auth";

/* 文本 */
import waText from './wa-text.vue'

const action:any=ref('/home/upload')
console.log(getToken(),'7777')
const headers:any=ref({
  authorization:'Bearer ' + getToken().accessToken
})

/* 单选or多选 */
const radio=ref<any>('1')
const limit=ref<number>(1)

/* 选择变化 */
const radioChange=(e:number)=>{
  radio.value=e
}
const fileList = ref<UploadUserFile[]>([
  // {
  //   name: 'element-plus-logo.svg',
  //   url: 'https://element-plus.org/images/element-plus-logo.svg',
  // },
  // {
  //   name: 'element-plus-logo2.svg',
  //   url: 'https://element-plus.org/images/element-plus-logo.svg',
  // },
])

/* 上传成功回调 */
const handleSuccess:any=(uploadFile)=>{
  if(uploadFile.code==200){
    // 上传成功打开文件(图片)
    ElMessage.success('上传成功,即将打开...')
    //1s后跳转
    setTimeout(()=>{
    window.open(uploadFile.data.url)
    },1000)
  }
}

/* 上传之前 */
const beforeUpload:any=(file)=>{
  const typeArr=['application/pdf'] //禁止上传的文件类型
  if(typeArr.includes(file.type)){
   ElMessage.warning('不允许上传pdf文件')
   return  Promise.reject(false)
  }
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}

// const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
//   return ElMessageBox.confirm(
//     `Cancel the transfer of ${uploadFile.name} ?`
//   ).then(
//     () => true,
//     () => false
//   )
// }

</script>
<style lang="scss" scoped></style>